<template>
  <div class='login-box'>
    <div class="login-box-con">
      <input class="input"
             maxlength="15"
             placeholder="用户名"
             placeholder-style="color: #ddd"
             v-model="username" />
      <input class="input"
             type="password"
             maxlength="50"
             placeholder="密码"
             placeholder-style="color: #ddd"
             v-model="password" />
      <div class="login-box-btn"
           @click="login">
        登陆
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login () {
      if (this.username === '') {
        alert('用户名不能为空');
      } else if (this.password === '') {
        alert('密码不能为空');
      } else {
        const params = {
          data: {
            attributes: {
              username: this.username,
              password: this.password,
            },
          },
        };
        axios.post('/api/login', {
          ...params
        })
          .then(function (response) {
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    }
  }
}
</script>

<style lang="css">
</style>




